<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>修改账户信息</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../common/cs_work_header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">账户信息</div>
                        <div class="layui-card-body">
                            <form class="layui-form layui-form-pane" action="">
                                <input type="hidden" name="id" lay-verify="id">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="name" lay-verify="name" autocomplete="off"
                                               placeholder="请输入用户名" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">密码</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="passwd" lay-verify="passwd" autocomplete="off"
                                               placeholder="请设置密码" value="" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" lay-verify="gender" name="gender" value="10" title="男"
                                               checked>
                                        <input type="radio" lay-verify="gender" name="gender" value="20" title="女">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="onStatus" class="layui-form-label">冻结账户</label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" id="onStatus" checked="" name="onStatus"
                                               lay-skin="switch"
                                               lay-filter="onStatus" lay-text="冻结|解冻">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="groupId" class="layui-form-label">选择分组</label>
                                    <div class="layui-input-inline">
                                        <select id="groupId" name="groupId" style="layui-input-inline">
                                        </select>
                                    </div>
                                </div>
                                <!--<div class="layui-form-item">-->
                                <!--<label class="layui-form-label">备注</label>-->
                                <!--<div class="layui-input-inline">-->
                                <!--<textarea name="remarks" lay-verify="remarks" placeholder="请填写备注"-->
                                <!--class="layui-textarea"></textarea>-->
                                <!--</div>-->
                                <!--</div>-->
                                <div class="layui-col-xs12">
                                    <a class="layui-btn" lay-submit lay-filter="formSubmit">确认修改</a>
                                </div>
                            </form>
                            <div id="bind_google_code" style="display: none;">
                                <div class="layui-form layui-form-pane p-20">
                                    <div id="qrcode"></div>
                                    <br>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">google验证码</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="code" lay-verify="code" autocomplete="off"
                                                   class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-col-xs12">
                                        <a class="layui-btn" lay-submit lay-filter="codeSubmit">绑定</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/js/qrcode.min.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var $ = layui.$, form = layui.form, layer = layui.layer;

        service.get('api/v1/my').then((res1) => {
            if (res1.code === 200) {
                $('input[name=id]').val(res1.data.id)
                $('input[name=name]').val(res1.data.name)
                $('input[name=gender]').val(res1.data.gender)
                $('input[name=onStatus]').attr('checked', res1.data.onStatus === 10)
                form.render('radio')

                service.get('mfconfig').then((response) => {
                    if (response.data) {
                        var data = response.data
                        data.forEach((e) => {
                            if (e.id === 1) {
                                var groups = JSON.parse(e.values)
                                var html = '<option value="0">选择分组</option>'
                                if (groups.length > 0) {
                                    groups.forEach(o => {
                                        if (o.id === res1.data.groupId) {
                                            html += '<option selected="selected" value=' + o.id + '>' + o.name + '</option>'
                                        } else {
                                            html += '<option value=' + o.id + '>' + o.name + '</option>'
                                        }
                                    })
                                }
                                $('#groupId').html(html)
                                form.render('select')
                            }
                        })
                    } else {
                        layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                    }
                }).catch((err) => {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                })

                // 用户绑定了Google验证码
                if (res1.data.isBindGoogleCode === 10) {
                    // 获取谷歌验证码
                    service.get('api/v1/gencode').then((res2) => {
                        if (res2.code === 200) {
                            layer.open({
                                type: 1,
                                area: ['400px', '500px'],
                                title: '绑定Google验证码',
                                content: $('#bind_google_code'),
                                success: function () {
                                    var qrcode = new QRCode("qrcode", {
                                        text: response.data,
                                        width: 200,
                                        height: 200,
                                        colorDark: "#000000",
                                        colorLight: "#ffffff",
                                        correctLevel: QRCode.CorrectLevel.H
                                    });
                                }
                            })
                        } else {
                            layer.msg(res2.msg, {offset: '45vh', icon: 5, time: 2000});
                        }
                    }).catch((err2) => {
                        layer.msg(err2.msg, {offset: '45vh', icon: 5, time: 2000});
                    })
                }
            } else {
                layer.msg(res1.msg, {offset: '45vh', icon: 5, time: 2000});
            }
        }).catch((err1) => {
            layer.msg(err1.msg, {offset: '45vh', icon: 5, time: 2000});
        })

        //自定义验证规则
        form.verify({
            name: function (value) {
                if (value.length < 4 || value.length > 16) {
                    return '请输入用户名，4到16个字符';
                }
            },
            remarks: function (value) {
                if (value.length < 1) {
                    return '请填写备注';
                }
            },
            code: function (value) {
                if (value.length < 1) {
                    return '请输入google验证码';
                }
            },
            passwd: function (value) {
                if (value.length < 6 || value.length > 16) {
                    return '请输入密码，6到16个字符';
                }
            },
            groupId: function (value) {
                if (value === '0') {
                    return '请选择分组';
                }
            }
        });

        //监听提交
        form.on('submit(formSubmit)', function (data) {
            service.put('api/v1/account', {
                id: parseInt(data.field.id),
                gender: parseInt(data.field.gender),
                name: data.field.name,
                passwd: data.field.passwd,
                groupId: parseInt(data.field.groupId),
                // remark: data.field.remarks,
                status: $('input[name=onStatus]').attr('checked') ? 10 : 20
            }).then((response) => {
                if (response.code === 200) {
                    layer.msg('修改成功', {offset: '45vh', icon: 1, time: 2000});
                } else {
                    layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                }
            }).catch((err) => {
                layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
            })
            return false;
        });

        //监听验证google验证码
        form.on('submit(codeSubmit)', function (data) {
            service.post('api/v1/verifycode', {
                code: data.field.code,
            }).then((response) => {
                if (response.code === 200) {
                    layer.msg('验证成功', {offset: '45vh', icon: 1, time: 2000},function () {
                        layer.closeAll()
                    });
                } else {
                    layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                }
            }).catch((err) => {
                layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
            })
            return false;
        });
    });
</script>
</body>
</html>
